<template>
  <div style="width: 100%; height: 100%">
    <vxe-grid
      border
      stripe
      :columns="tableData.columns"
      :align="tableData.align"
      :span-method="objectSpanMethod"
      :showHeader="showHeader"
      :data.sync="tableData.data"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
      class="my-grid66"
    >
      <template #header>
        <div class="first-col">
          <div class="first-col-top">{{ slots[0] }}</div>
          <div class="first-col-bottom">{{ slots[1] }}</div>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      //列表数据
      type: Object | Array,
      default: () => ({
        columns: [],
        data: [],
      }),
    },
    slots: {
      //头部插槽
      type: Object | Array,
      default: () => ({
        columns: [],
        data: ["", ""],
      }),
    },
    height: {
      //高度
      type: Number | String,
      default: () => "",
    },
    reverse: {
      //行列是否转换
      type: Boolean,
      default: () => false,
    },
    showHeader: {
      //表头是否显示
      type: Boolean,
      default: () => true,
    },
    border: {
      //是否展示边框
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {};
  },
  created() {
    this.tableData.border = this.border;
    if (this.tableData.reverse == true) {
      this.reverseTable(this.tableData.columns, this.tableData.data);
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 1,
            colspan: 2,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    // 反转函数
    reverseTable(columns, list) {
      try {
        let arr = [];
        for (let i = 0; i < columns.length; i++) {
          if (!columns[i].children) {
            arr.push(columns[i]);
          } else {
            for (let j of columns[i].children) {
              j.parents = columns[i].title;
            }
            arr.push(...columns[i].children);
          }
        }
        const buildData = arr.map((column) => {
          const item = { col0: column.title };
          if (column.parents) {
            item["col"] = column.parents;
          } else {
            item["col"] = " ";
          }
          // console.log(column)
          list.forEach((row, indexs) => {
            item[`col${indexs + 1}`] = row[column.field];
          });
          return item;
        });
        const buildColumns = [
          {
            field: "col",
            // fixed: "left",
            minWidth: 70,
          },
          {
            field: "col0",
            // fixed: "left",
            minWidth: 70,
          },
        ];
        list.forEach((item, index) => {
          buildColumns.push({
            field: `col${index + 1}`,
            minWidth: 100,
          });
        });
        this.tableData.data = buildData;
        this.tableData.columns = buildColumns;
        // console.log(this.tableData);
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style>
.my-grid66 .alert-message {
  height: 40px;
  display: flex;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}
.my-grid66 .alert-message-icon {
  width: 30px;
  text-align: center;
  color: #409eff;
  margin-right: 8px;
}
.my-grid66 .alert-message-content {
  flex-grow: 1;
  padding-right: 20px;
}
.my-grid66 .page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.my-grid66 .select-count {
  display: inline-block;
  vertical-align: middle;
}
.my-grid66 .my-input {
  width: 100%;
}
.my-grid66 .first-col {
  position: relative;
  min-height: 30px;
}
.my-grid66 .first-col:before {
  content: "";
  position: absolute;
  left: -2%;
  top: 2%;
  width: 105%;
  height: 1px;
  transform: rotate(20deg);
  background-color: rgba(31, 179, 255, 0.1);
}
.my-grid66 .first-col .first-col-top {
  position: absolute;
  right: 4px;
  top: -20%;
}
.my-grid66 .first-col .first-col-bottom {
  position: absolute;
  left: 4px;
  bottom: -20%;
}
</style>